<template>
  <div class=" background_style">
    <el-row style="height: 89px; background-color: #00bbff">
      <el-col :span="3" class="text-center pt-4 pb-3">
        <span class="fs-5">校园答疑互动平台</span>
      </el-col>
      <el-col :span="2" class="text-center pt-4 pb-4">
        <el-button type="primary" class="pt-3 pb-3 fs-4" round>首页</el-button>
      </el-col>
      <el-col :span="2" class="text-left pt-4 pb-4">
        <el-button type="primary" class="pt-3 pb-3 fs-4" round
          >提问吧</el-button
        >
      </el-col>
      <el-col :span="6" class="text-left pt-4 pb-4">
        <el-input placeholder="请输入搜索内容">
          <template #append>
            <el-button type="Primary">
              <el-icon><search /></el-icon>
            </el-button>
          </template>
        </el-input>
      </el-col>
      <el-col :span="1" class="text-center pt-4 pb-4">
        <el-font class="fs-5">天气</el-font>
      </el-col>
      <el-col :span="2" class="text-center pt-2 pb-2">
        <el-font class="fs-6">今日</el-font>
      </el-col>
      <el-col :span="2" class="text-center pt-2 pb-2">
        <el-font class="fs-6">明日</el-font>
      </el-col>
      <el-col :span="2" class="text-center pt-4 pb-4">
        <div v-if="loginstatus">
          <el-font>欢迎您</el-font>
          <img
            :src="headUrl"
            style="width: 6rem; heighr: 6rem"
            @click="this.$router.push('/')"
          />
        </div>
        <div v-else>
          <el-button
            type="primary"
            class="pt-3 pb-3 fs-4"
            round
            @click="this.$router.push('/')"
            >登录</el-button
          >
        </div>
      </el-col>
      <el-col :span="2" class="text-center pt-4 pb-4">
        <el-dropdown split-button type="primary" style="w-100">
          个人信息
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>详细信息</el-dropdown-item>
              <el-dropdown-item @click="this.$router.push('/HomeGRFrame')"
                >修改信息</el-dropdown-item
              >
              <el-dropdown-item>安全设置</el-dropdown-item>
              <el-dropdown-item>我的提问</el-dropdown-item>
              <el-dropdown-item>退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </el-col>
      <el-col :span="2" class="text-center pt-1 pb-2">
        <img src="@/assets/llk.jpg" style="width: 5rem; height: 5rem" />
      </el-col>
    </el-row>
    <el-container>
      <el-aside width="180px" style="height: 50rem" class="text-center mt-2">
        <img
          src="@/assets/llk.jpg"
          style="height: 100px; border-radius: 50%"
          class="pt-3 pb-3"/>
        <el-menu class="mx-3 px-3 border-0">
          <el-menu-item class="fs-5 mx-auto mt-5">张三</el-menu-item>
          <el-menu-item><el-icon><UserFilled /></el-icon><router-link to="/">个人信息</router-link></el-menu-item>
          <el-menu-item><el-icon><EditPen /></el-icon><router-link to="/HomeGRFrame">修改信息</router-link></el-menu-item>
          <el-menu-item><el-icon><WarningFilled /></el-icon><router-link to="/HomeGeFrame">安全设置</router-link></el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <el-form
          :label-position="labelPosition"
          label-width="100px"
          :model="person"
          style="max-width: 460px"
          class="mx-auto">
        <el-row>
          <el-col class="fs-2 mx-4 mt-5 text-center">修改密码</el-col>
        <el-form-item  label="旧密码:" class="mt-4">
            <el-input v-model="person.password" type="password" style="width: 24rem; height: 2rem"  placeholder="旧密码"></el-input>
          </el-form-item>
          <el-form-item label="新密码:" class="mt-4">
            <el-input v-model="person.newpassword" type="password"  style="width: 24rem; height: 2rem" placeholder="新密码"></el-input>
          </el-form-item>
           <el-col class="text-center mt-3 ps-5">
      <el-button tyoe="primary" class="mx-auto " @click="saveAuthorInfo">保存</el-button>
      <el-button>取消</el-button>
    </el-col>
    </el-row>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import auth from '@/tools/auth.js'
import { UserFilled, EditPen, WarningFilled } from "@element-plus/icons-vue";
export default {
  name: "HomeGeFrame",
  components: {
    UserFilled,
    EditPen,
    WarningFilled,
  },
   data() {
      return {
        person: {
         password: null,
         newpassword: null,
         
      },
    };
  },
  methods:{
    loadAuthorInfo(){
      this.person = auth.getLoginUser();
    },
    saveAuthorInfo(){
      this.$axios
      .post("/api/home/change",this.person)
      .then(response =>{
        let data = response.data 
        if(data.code == 200){
          let nowLoginUser = data.data;
          auth.updateLoginUser(nowLoginUser)
        }
        alert(data.msg);
      })
    },
   
  },
  mounted() {
   this.loadAuthorInfo();
  }
};
</script>

<style scoped>
.background_style{
width:100%;
height:100%;
position:fixed;
background-size:100% 100%;
background-repeat: no-repeat;
background-image: url("@/assets/jian2.jpg");
} 
</style>